// 1.createContext 方法创建上下文对象
// 2.顶层组件provider给底层组件提供数据
// 3.在底层组件使用useContext方法接收顶层组件提供的数据
import { createContext, useContext, useState } from 'react'
// 创建context的上下文对象
const MsgContext = createContext()
// 跨层级组件使用context传递数据
function A() {
  return (
    <div style={{ width: '300px', height: '300px', border: '1px solid red' }}>
      我是A组件 <B />{' '}
    </div>
  )
}
function B() {
  const [message, setMessage] = useState('')
  const msg = useContext(MsgContext)

  return (
    <div style={{ width: '200px', height: '200px', border: '1px solid blue' }}>
      我是B组件 {message} <button onClick={() => setMessage(msg)}>点击</button>
    </div>
  )
}
function App() {
  const msg = '我是根组件给B组件传递的数据'
  return (
    <>
      <div style={{ width: '500px', height: '500px', border: '1px solid green' }}>
        我是根组件
        <MsgContext.Provider value={msg}>
          <A />
        </MsgContext.Provider>
      </div>
    </>
  )
}

export default App
